<template>
    <section class="embroidery-craftsmanship" :cur_scroll="cur_scroll"
        :style="{ '--rate-1': rate1, '--rate-2': rate2, '--rate-3': rate3 }">
        <h4>We embrace boundless creativity and guarantee exceptional quality.</h4>
        <div class="embroidery-craftsmanship-card">
            <cite>
                <p>
                    Tajima TMEZ-S1501C embroidery machines and COATS Sylko 120D thread guarantee rock-solid stability
                    for flat embroidery.
                </p>
                <figure>
                    <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-tajima.png')"
                        alt="emb-tajima">
                </figure>
            </cite>
        </div>
        <div class="embroidery-craftsmanship-card">
            <cite>
                <p>
                    Our support for uploading <ProductEmbDstTip>DST</ProductEmbDstTip> files caters to both professional
                    demand and creative imagination.
                </p>
                <figure>

                    <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-caters.png')"
                        alt="emb-caters">
                </figure>
            </cite>
        </div>
        <div class="embroidery-craftsmanship-card">
            <cite>
                <p>
                    15 thread colors, tailored for your embroidery designs.
                </p>
                <figure>
                    <ul>
                        <li v-for="{ rgb, name } in colorOption" :key="rgb">
                            <div class="round" :style="`background-color: ${rgb}`"></div>
                            <span>{{ name }}</span>
                        </li>
                        <li class="fill"></li>
                        <li class="fill"></li>
                        <li class="fill"></li>
                        <li class="fill"></li>
                    </ul>
                </figure>
            </cite>
        </div>

    </section>
</template>
<script>
const colorOption = [
    { rgb: '#000000', name: 'Black' },
    { rgb: '#ABB0B2', name: 'Silver Gray' },
    { rgb: '#FFFFFF', name: 'White' },
    { rgb: '#95704E', name: 'Old Gold' },
    { rgb: '#FFCC00', name: 'Yellow' },
    { rgb: '#FA5716', name: 'Orange' },
    { rgb: '#F0297F', name: 'Flamingo' },
    { rgb: '#131F4F', name: 'Navy' },
    { rgb: '#78BE3F', name: 'Lime Green' },
    { rgb: '#007848', name: 'Kelly Green' },
    { rgb: '#005397', name: 'Royal Blue' },
    { rgb: '#00A8E0', name: 'Aqua' },
    { rgb: '#670001', name: 'Maroon' },
    { rgb: '#B82828', name: 'Red' },
    { rgb: '#5F388C', name: 'Purple' },
]
export default {
    props: {
        cur_scroll: {
            type: Number,
            default: 0
        },
    },
    data () {
        return {
            colorOption: colorOption,
            area: [[338, 676], [756, 1094], [1174, 1512]]
        }
    },
    computed: {
        rate1 () {
            const [min, max] = this.area[0];
            return this.$clamp(0, (this.cur_scroll - min) / 338, 1)
        },
        rate2 () {
            const [min, max] = this.area[1];
            return this.$clamp(0, (this.cur_scroll - min) / 338, 1)
        },
        rate3 () {
            const [min, max] = this.area[2];
            return this.$clamp(0, (this.cur_scroll - min) / 338, 1)
        }
    },
    methods: {
    }
}
</script>
<style scoped lang="scss">
.embroidery-craftsmanship {
    padding: 0 14px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    background: #FAFAFA;
    padding-bottom: 80px;

    &>* {
        width: 100%;
        max-width: 1352px;
    }

    h4 {
        margin-top: 80px;
        width: 84%;
        max-width: 1140px;
        text-align: center;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 46px;
        color: #000000;
        line-height: 66px;
    }

    .embroidery-craftsmanship-card {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 80px;
        height: 338px;
        width: 100%;

        cite {
            width: 100%;
            background: #FFFFFF;
            border-radius: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 338px;
            transform: scale(0.5) translateZ(0);

            p {
                flex: 1;
                padding: 0 40px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                font-size: 20px;
                color: #000000;
                line-height: 32px;
            }

            figure {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 600px;
                height: 100%;
                border-radius: 0 20px 20px 0;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }

                ul {
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: center;
                    margin: 0 -20px -20px;

                    li {
                        width: 126px;
                        height: 32px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        margin: 0 20px 20px;

                        .round {
                            width: 30px;
                            height: 30px;
                            border-radius: 20px;
                            border: 1px solid rgba(0, 0, 0, 0.2);
                            margin-right: 14px;
                        }

                        span {
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                            font-size: 14px;
                            color: #292929;
                            line-height: 22px;
                        }

                        &.fill {
                            display: none
                        }
                    }
                }
            }
        }

        @keyframes scale-card {
            0% {
                transform: scale(0.5) translateZ(0);
            }

            100% {
                transform: scale(1) translateZ(0);
            }
        }

        &:nth-last-child(3) {
            cite {
                animation: scale-card 0s linear 0 forwards;
                animation-iteration-count: var(--rate-1);
            }
        }

        &:nth-last-child(2) {
            cite {
                animation: scale-card 0s linear 0 forwards;
                animation-iteration-count: var(--rate-2);
            }

            p {
                order: 1;
            }

            figure {
                order: 0;
                border-radius: 20px 0 0 20px;
            }
        }

        &:nth-last-child(1) {
            cite {
                animation: scale-card 0s linear 0 forwards;
                animation-iteration-count: var(--rate-3);
            }
        }
    }

}

.embroidery-craftsmanship.animation-none {

    h4 {
        margin-top: 60px;
        font-size: 24px;
        line-height: 28px;
        padding: 0 14px;
        margin-bottom: 20px;
    }

    .embroidery-craftsmanship-card {
        box-sizing: border-box;
        margin-top: 10px;
        height: auto;

        cite {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            background: #FFFFFF;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            transform: none;
            animation: none;

            p {
                order: 1;
                flex: 1;
                padding: 12px 14px;
                font-size: 16px;
                line-height: 24px;
            }

            figure {
                width: 100%;
                height: auto;
                border-radius: 10px 10px 0 0;

                img {
                    height: auto;
                }

                ul {
                    padding: 0 24px;
                    justify-content: center;
                    margin: 24px -10px 10px;

                    li {
                        width: 126px;
                        height: 32px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        margin: 0 10px 14px;

                        &.fill {
                            display: block;
                            margin: 0 10px 0;
                            height: 1px;
                        }

                        &:last-child {
                            justify-self: flex-start;
                        }
                    }
                }
            }
        }

        &:last-child {
            cite p {
                padding: 12px 24px;
            }
        }
    }

}
</style>